<template>
  <div class="designService">
    <div class="title_box">
      <div class="content">
        <div class="right">
          <img src="@/assets/design/1.png" alt="icon" />
        </div>
        <div class="left">
          <h3>引物探针</h3>
          <div class="line"></div>
          <h3>设计服务</h3>
        </div>
      </div>
    </div>
    <div class="introduce">
      <div class="introduce_text">
        <span class="import"
          >决定PCR反应与恒温扩增反应成功与否的最重要因素是弓
          物和探针的序列及质量。</span
        >量准针对恒温扩增及qPCR技术
        提供专业的引物及探针设计和检测服务，可根据客户需求
        提供相对应的设计，修饰，测试等一站式配套服务。
      </div>
      <div class="introduce_text">
        利用此服务，不仅可以<span class="import"
          >获得经过实验验证的高性能引物探针</span
        >，还可以获<span class="import"
          >得优化后的扩增条件以及最佳的引物组合等信息</span
        >。避免了前期摸索实验条件过程中不必要的试剂消耗，更节省了大量的宝贵时间，保证实验顺利开展，加速项
        目的推进!
      </div>
    </div>
    <div class="sub_title">
      <div class="switchBtn">
        <img src="@/assets/design/2.png" alt="btn" />
      </div>
      <div class="sub_title_text">筛选服务原则</div>
      <div class="switchBtn">
        <img src="@/assets/design/3.png" alt="btn" />
      </div>
    </div>
    <div class="step_all">
      <div class="step">
        <div class="external">
          <div class="inside">1</div>
        </div>
        <div class="step_text">确保高性能的引物探针组合</div>
      </div>
      <div class="step">
        <div class="step_text">获得更优化的恒温扩增条件</div>
        <div class="external" style="left: 82%;">
          <div class="inside">2</div>
        </div>
      </div>
      <div class="step">
        <div class="external">
          <div class="inside">3</div>
        </div>
        <div class="step_text">快速得到期望的实验结果</div>
      </div>
    </div>
    <div class="sub_title">
      <div class="switchBtn">
        <img src="@/assets/design/2.png" alt="btn" />
      </div>
      <div class="sub_title_text">服务特色</div>
      <div class="switchBtn">
        <img src="@/assets/design/3.png" alt="btn" />
      </div>
    </div>
    <template>
      <div class="characteristic">
        <div><img src="@/assets/design/4.png" alt="" /></div>
        <div class="characteristic_content">
          <p class="characteristic_text1">完善的一体化服务</p>
          <p class="characteristic_text2">
            专业技术人员提供从咨询到交付的全方位服务
          </p>
        </div>
      </div>
      <div class="characteristic">
        <div><img src="@/assets/design/4.png" alt="" /></div>
        <div class="characteristic_content">
          <p class="characteristic_text1">优质的恒温扩增分子检测平台</p>
          <p class="characteristic_text2">
            实验方案经过大量项目验证，保障产品质量
          </p>
        </div>
      </div>
      <div class="characteristic">
        <div><img src="@/assets/design/4.png" alt="" /></div>
        <div class="characteristic_content">
          <p class="characteristic_text1">高效的结果反馈</p>
          <p class="characteristic_text2">
            一至两周内将产品交付给顾客，保证客户实验进度
          </p>
        </div>
      </div>
      <div class="characteristic">
        <div><img src="@/assets/design/4.png" alt="" /></div>
        <div class="characteristic_content">
          <p class="characteristic_text1">高质量定制化引物探针</p>
          <p class="characteristic_text2">经多重验证纯度高，特异性强</p>
        </div>
      </div>
    </template>
    <div class="sub_title">
      <div class="switchBtn">
        <img src="@/assets/design/2.png" alt="btn" />
      </div>
      <div class="sub_title_text">服务项目</div>
      <div class="switchBtn">
        <img src="@/assets/design/3.png" alt="btn" />
      </div>
    </div>
    <div class="Mytable">
      <div class="theader">
        <span>服务项目/内容</span>
        <span>服务周期</span>
      </div>
      <div class="tbody">
        <div>
          <p>常规RT-PCR或qPCR引物和探针设计</p>
          <p class="sub_text">根据客户需求设计出特异性强的引物和探针组</p>
        </div>
        <span class="time">1-3工作日</span>
      </div>
      <div class="tbody">
        <div>
          <p>
            恒温扩增引物和探针设计
            <span class="small_text">(主要以RAA、RPA技术为主)</span>
          </p>
          <p class="sub_text">根据客户需求设计出特异性强的引物和探针组</p>
        </div>
        <span class="time">1-3工作日</span>
      </div>
      <div class="tbody">
        <div>
          <p>RT-PCR或qPCR引物和探针设计及性能测试</p>
          <p class="sub_text">
            根据客户需求设计出RT-PCR的引物和探针组并验证筛选出最优的引物和探针组
          </p>
        </div>
        <span class="time">1-2周</span>
      </div>
      <div class="tbody">
        <div>
          <p>
            恒温扩增引物和探针设计及性能测试<br />
            <span class="small_text">(主要以RAA、RPA技术为主)</span>
          </p>
          <p class="sub_text">
            根据客户需求设计出RT-PCR的引物和探针组并验证筛选出最优的引物和探针组
          </p>
        </div>
        <span class="time">1-2周</span>
      </div>
      <div class="tbody">
        <div>
          <p>RT-PCR引物和探针效能测试与生产</p>
          <p class="sub_text">
            根据各户需冰攻计出RTCR小5初探计验证筛选出最优的引物和探针组<br />交货时提供引物和探针干粉
          </p>
        </div>
        <span class="time">1-2周</span>
      </div>
      <div class="tbody">
        <div>
          <p>恒温扩增引物和探针效能测试与生产</p>
          <p class="sub_text">
            根据各户需冰攻计出RTCR小5初探计验证筛选出最优的引物和探针组<br />交货时提供引物和探针干粉
          </p>
        </div>
        <span class="time">1-2周</span>
      </div>
    </div>
    <div class="sub_title">
      <div class="switchBtn">
        <img src="@/assets/design/2.png" alt="btn" />
      </div>
      <div class="sub_title_text">服务流程</div>
      <div class="switchBtn">
        <img src="@/assets/design/3.png" alt="btn" />
      </div>
    </div>
    <div class="process">
      <div class="process_item">
        <h3 class="title">客户提供</h3>
        <p>
          目的基因的名称、种属、序列<br /><span class="small">(可不提供)</span>
        </p>
        <p>引物探针设计要求、技术方向</p>
        <p>需求数量</p>
      </div>
      <img src="@/assets/design/5.png" alt="" />
      <div class="process_item">
        <h3 class="title">交付结果</h3>
        <p>筛选后最优的引物探针组序列信息</p>
        <p>引物探针筛选结果实验报告</p>
        <p>引物和探针干粉</p>
      </div>
    </div>
    <div class="process_img">
      <img :src="require('@/assets/design/6.png')" alt="流程" />
    </div>
    <div class="sub_title">
      <div class="switchBtn">
        <img src="@/assets/design/2.png" alt="btn" />
      </div>
      <div class="sub_title_text">案例展示</div>
      <div class="switchBtn">
        <img src="@/assets/design/3.png" alt="btn" />
      </div>
    </div>
    <div class="case">
      <p class="case_text">
        HPV18RAA检测项目，在探针上下游各设计2条引物，进行相互配对验证，筛选出扩增效率最高，验证效果最好的一对引物。
      </p>
      <img
        class="computed"
        :src="require('@/assets/design/7.png')"
        alt=""
      />
    </div>
    <div class="sub_title">
      <div class="switchBtn">
        <img src="@/assets/design/2.png" alt="btn" />
      </div>
      <div class="sub_title_text">配套产品</div>
      <div class="switchBtn">
        <img src="@/assets/design/3.png" alt="btn" />
      </div>
    </div>
    <div class="accessory">
      <div class="accessory_item">
        <div class="left">
          <h3>荧光型核酸扩增试剂盒</h3>
          <h3>(RAA法IRT-R AA法)</h3>
          <p class="articleNo">货号: A31007/A31008</p>
          <div class="especially">
            <p>快速扩增</p>
            <p>特异性好</p>
            <p>灵敏度高</p>
            <p>冻干工艺</p>
          </div>
        </div>
        <div class="right">
          <img :src="require('@/assets/design/8.png')" alt="" />
        </div>
      </div>
      <div class="accessory_item">
        <div class="left">
          <h3>恒温荧光检测仪器</h3>
          <p class="articleNo">货号: J10005</p>
          <div class="especially">
            <p>操作简便</p>
            <p>结果可靠</p>
            <p>无需专业培训</p>
            <p>一步导出数据</p>
            <p>小巧便捷</p>
            <p>应用范围广</p>
          </div>
        </div>
        <div class="right">
          <img :src="require('@/assets/design/9.png')" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.designService {
  height: 100%;
  width: 100%;
  min-height: 100vh;
  // padding-bottom: 100px;
  background-color: #f2f4fa;
  .title_box {
    height: 100%;
    background-color: #d8d4f1;
    padding: 10px;
    .content {
      // display: flex;
      // align-items: center;
      // justify-content: space-around;
      background-color: #fff;
      padding: 10px;
      .left {
        display: flex;
        align-items: center;
        h3 {
          font-size: 20px;
          color: #3731ad;
        }
        .line {
          flex: 1;
          height: 4px;
          border-radius: 3px;
          width: 40%;
          background-color: #d8d4f1;
          margin: 0 10px;
        }
      }
      .right {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .introduce {
    margin: 10px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 20px;
    box-shadow: 8px 8px 4px 0px #3731ac;
    .introduce_text {
      font-size: 18px;
      font-weight: bold;
      color: #6b6b6b;
      line-height: 1.8;
      .import {
        color: #3731ac;
      }
    }
  }

  .sub_title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    .switchBtn {
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &_text {
      margin: 0 20px;
      font-size: 24px;
      color: #3731ac;
      font-weight: bold;
      position: relative;
      letter-spacing: 4px;
    }
    &_text::before {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 4px;
      background-color: #d8d4f1;
    }
  }

  .step_all {
    padding: 20px;
    .step {
      display: inline-block;
      text-align: center;
      height: 100%;
      margin: 10px 0;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      .external {
        position: absolute;
        top: 50%;
        left: -10px;
        z-index: 99;
        transform: translateY(-50%);
        text-align: center;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #3731ac;
        display: flex;
        align-items: center;
        justify-content: center;
        .inside {
          width: 50px;
          height: 50px;
          line-height: 50px;
          border-radius: 50%;
          border: 1.5px solid #3731ad;
          background-color: #d8d4f1;
          font-size: 26px;
          font-weight: bold;
          color: #3731ac;
        }
      }
      .step_text {
        display: inline-block;
        width: 80%;
        font-size: 20px;
        font-weight: 700;
        padding: 10px 30px;
        letter-spacing: 4px;
        background-color: #d8d4f1;
        border: 2px solid #3731ad;
        color: #3731ac;
        border-radius: 10px;
      }
    }
  }

  .characteristic {
    display: flex;
    align-items: flex-start;
    padding: 0 10px;
    margin: 20px 0;
    img {
      margin: 4px 10px;
      width: 30px;
      height: 22px;
    }
    .characteristic_text1 {
      font-size: 20px;
      color: #3731ad;
      letter-spacing: 4px;
      font-weight: bold;
    }
    .characteristic_text2 {
      font-size: 18px;
      color: #666666;
      line-height: 1.4;
      letter-spacing: 2px;
    }
  }

  .Mytable {
    width: 100%;
    height: 100%;
    padding: 20px 10px;
    .theader {
      padding: 10px 16px;
      font-size: 20px;
      color: #3731ad;
      font-weight: 700;
      border: 2px solid #3731ad;
      border-radius: 10px;
      background-color: #d8d4f1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .tbody {
      padding: 10px 16px;
      font-size: 19px;
      font-weight: 700;
      color: #3731ad;
      border: 2px solid #3731ad;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      .time {
        white-space: nowrap;
      }
      .sub_text {
        width: 90%;
        color: #676767;
        margin-top: 10px;
        font-weight: 400;
        font-size: 18px;
      }
      .small_text {
        font-size: 15px;
      }
    }
  }

  .process {
    padding: 20px 10px;
    display: flex;
    .process_item {
      flex: 1;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: flex-start;
      .title {
        font-size: 24px;
        color: #3731ac;
      }
      p {
        text-align: center;
        font-size: 16px;
        color: #666666;
        margin-top: 16px;
        .small {
          font-size: 14px;
        }
      }
    }
  }

  .process_img {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .case {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    &_text {
      font-size: 18px;
      color: #666666;
      line-height: 1.4;
      letter-spacing: 2px;
      margin: 20px 0;
    }
    .computed {
      width: 100%;
      height: 100%;
    }
  }

  .accessory {
    width: 100%;
    height: 100%;
    padding: 20px 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .accessory_item {
      width: 100%;
      // display: flex;
      // align-items: flex-start;
      // justify-content: space-between;
      padding: 10px 20px;
      background-color: #d8d4f1;
      border: 2px solid #3731ad;
      border-radius: 10px;
      margin-bottom: 30px;
      .left {
        h3 {
          font-size: 22px;
          color: #3731ac;
          line-height: 1.4;
        }
        .articleNo {
          font-size: 16px;
          color: #595757;
          margin: 10px 0;
        }
        .especially {
          display: flex;
          flex-wrap: wrap;
          p {
            padding-left: 20px;
            color: #595757;
            // text-align: center;
            width: 50%;
            font-size: 18px;
            position: relative;
            margin-bottom: 20px;
          }
          p::before {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #3731ac;
          }
        }
      }
      .right {
        // min-width: 200px;
        height: 200px;
        img {
          width: 100%;
          object-fit: contain;
          height: 100%;
        }
      }
    }
  }
}
</style>
